<template>
    <div class="border-bottom-1px search-area">
        <div class="catmenubtn" :class="{'act': catmenustatus }" @click="catmenuchange">
            <span class="icon-list2"></span>
        </div>
        <div class="search-area-w">
            <mt-search v-model="searchVal" cancel-text="取消" placeholder="请输入产品型号"></mt-search>
        </div>
        <div class="searchbtn">
                <mt-button type="default" size="small" @click.native="searchKey">搜索</mt-button>
            </div>
        <div class="catmenu" v-show="catmenustatus" @click="catmenuchange">
            <ul class="catmenu-list">
                <router-link class="border-bottom-1px catindexlist-item" to="power" tag="li"><span>Power Generation电力设备</span>
                </router-link>
                <router-link class="border-bottom-1px catindexlist-item" to="gas" tag="li"><span>Gas燃气发电</span>
                </router-link>
                <router-link class="border-bottom-1px catindexlist-item" to="offshore" tag="li"><span>Offshore海洋平台动力</span>
                </router-link>
                <router-link class="border-bottom-1px catindexlist-item" to="onshore" tag="li"><span>Onshore油田动力</span>
                </router-link>
                <router-link class="border-bottom-1px catindexlist-item" to="marine" tag="li"><span>Marine船舶动力</span>
                </router-link>
                <router-link class="border-bottom-1px catindexlist-item" to="propulsion" tag="li"><span>Propulsion船舶推进器</span>
                </router-link>
                <router-link class="border-bottom-1px catindexlist-item" to="industrial" tag="li"><span>Industrial工业动力</span>
                </router-link>
                <router-link class="border-bottom-1px catindexlist-item" to="microgrid" tag="li"><span>Microgrid微电网</span>
                </router-link>
            </ul>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import Vue from 'vue';
    import { Search,Button} from 'mint-ui'
    Vue.component(Button.name, Button);
    Vue.component(Search.name, Search);
    export default {
        data(){
            return {
                searchVal: null,
                catmenustatus: false
            }
        },
        methods: {
           catmenuchange() {
               this.catmenustatus = !this.catmenustatus;
           },
           searchKey() {
                this.$emit('getQueryKeyword',this.searchVal);
           }
        },
        watch:{  
            searchVal:{  
                handler(val,oldval){  
                    if(val === '') {
                        this.$emit('getQueryKeyword',this.searchVal);
                    }
                },  
                deep:true//对象内部的属性监听，也叫深度监听  
            } 
        },
        
    }
</script>

<style lang="less" rel="stylesheet/less">
    @import '../../common/less/index.less';
    .catmenu{
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        position: fixed;
        top:53px;
        bottom: 0;
        left: 0; right: 0;z-index: 9999;
    }
    .catmenu-list{
        width: 100%;
        margin: 0;padding: 0;
        background-color: #fff;
        .catindexlist-item{
            list-style-type: none;
            height: 50px;
            line-height: 50px;
            width: 100%;
            text-indent: 15px;
            font-size: @font-size-meduim;
            .border-bottom-1px(@color-border);
        }
        .router-link-active{
            color: @color-bg-active;
        }
    }
    .search-area {
        background-color: @color-bg-gray;
        height: 53px;
        z-index: 99999;
        display: flex;
        .border-bottom-1px(@color-border);
        .catmenubtn{
            flex: 0 0 60px;text-align: center;line-height: 52px;font-size: 22px;color:#666666;
            &.act{
                color: #ffcd11;
            }
        }
        .search-area-w{
            flex: 1;
        }
        .searchbtn{
            flex: 0 0 70px;
            .mint-button{
                margin-top: 10px;
                padding:0 16px;
            }
        }
        .mint-search {
            height: 100%;
        }
        
        .mint-searchbar {
            background: none;
            .mint-searchbar-inner {
                border-radius: 18px;
                .mintui-search {
                    font-size: @font-size-meduim;
                }
            }
            .mint-searchbar-cancel {
                color: @color-text-666
            }
            .mint-search-list-warp {
                background-color: #666666;
            }
        }
    }
</style>